<template>
    <div>
        <el-tooltip :disabled="!(entryCodeList && entryCodeList.length)" effect="dark" placement="top-start">
            <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                <li :key="item[dictKey]" v-for="item in entryCodeList">
                    {{ item[dictKey] + ' ' + item[dictKeyName] }}
                </li>
            </ul>
            <el-select
                v-model="entryCode"
                multiple
                collapse-tags
                filterable
                clearable
                @clear="setInputData(entryCode)"
                remote
                style="width: 100%"
                @visible-change="handleVisibleChange"
                @change="setInputData(entryCode)"
                placeholder="请选择"
                :remote-method="getList"
                :loading="loading"
                size="mini"
                :disabled="disabled"
            >
                <el-option v-show="showAll && (stockReport || []).length > 0" label="-1 选择全部" value="-1" :disabled="isDisabledAll"></el-option>
                <el-option
                    v-for="i in stockReport"
                    :key="i[dictKey]"
                    :label="i[dictKey] + ' ' + i[dictKeyName]"
                    :value="i[dictKey]"
                    :disabled="isDisabledOther || showDis"
                >
                </el-option>
            </el-select>
        </el-tooltip>
    </div>
</template>
<script lang="ts">
import { changeOptions } from '@/utils/tools';
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({
    name: 'RiskEntryInputs',
})
/**
 * interfaceUrl 接口
 * returnDatas  勾选key值
 * showAll  显示选择全部
 * showDis   禁用选项
 * dictKey key字段名
 * dictKeyName value字段名
 * disabled 禁用下拉框
 */
export default class RiskEntryInputs extends Vue {
    // 针对需求选择可以参考element
    @Prop({ default: '/fundInfo/list/byUser/like?fundCodeOrName=' }) interfaceUrl: any;
    @Prop() returnDatas!: any;
    @Prop({ default: true }) readonly showAll!: boolean;
    @Prop({ default: true }) readonly showDis!: boolean; //
    @Prop({ default: false }) readonly disabled: boolean;
    @Prop({ default: 'fundCode' }) dictKey: string;
    @Prop({ default: 'fundNameSt' }) dictKeyName: string;

    isDisabledAll: boolean = false; // 全部选择是否禁用

    isDisabledOther: boolean = false; // 其他选择是否禁用

    stockReport: any[] = []; // 下拉数据

    entryCode: any[] = []; // 已选数据key

    entryCodeList: any[] = []; // 已选数据

    loading: boolean = false;

    @Watch('returnDatas', { immediate: true, deep: true })
    async watchRetuen() {
        this.entryCode = this.returnDatas;
        this.getList('', true);
    }

    timer = null;

    // 下拉数据
    getList(val: any, isTooltip?: boolean) {
        this.loading = true;
        try {
            clearTimeout(this.timer);
        } catch (e) {}
        this.timer = setTimeout(() => {
            this.$axios
                .get(this.interfaceUrl + val)
                .then((res: any) => {
                    this.stockReport = res;
                    // this.entryCodeList = [];
                    this.loading = false;
                    console.log('111');
                    if (isTooltip) {
                        this.setInputData(this.entryCode);
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        }, 300);
    }

    // 下拉数据改变时
    setInputData(val: any) {
        if (!val || (val && !val.length)) {
            this.isDisabledAll = false;
            this.isDisabledOther = false;
        } else {
            if (val.includes('-1')) {
                this.isDisabledAll = false;
                this.isDisabledOther = true;
            } else {
                this.isDisabledAll = true;
                this.isDisabledOther = false;
            }
        }

        if (this.isDisabledAll == false && this.isDisabledOther == true) {
            let obj = {};
            obj[this.dictKey] = '-1';
            obj[this.dictKeyName] = '全部选择';
            this.entryCodeList = [obj];
        } else {
            this.entryCodeList = this.stockReport.filter(item => this.entryCode.includes(item[this.dictKey]));
            console.log(this.entryCodeList, 'entryCodeList');
        }
        this.stockReport = changeOptions(val, this.stockReport, this.dictKey);
        // console.log(this.stockReport, 'stockReport');
    }

    handleVisibleChange(value: any) {
        console.log(value, 'value');
        if (!value) {
            this.$emit('set-entry-data', this.entryCode);
        } else {
            this.setInputData(this.entryCode);
        }
    }
}
</script>
<style lang="scss" scoped>
.icon-but {
    padding: 2px 8px !important;
    margin: 0;
    margin-right: 10px;

    & /deep/ .el-button--mini {
        padding: 2px 8px !important;
    }
}
// /deep/ .el-select__tags {
//     flex-wrap: nowrap;

//     .el-tag.el-tag--info {
//         display: flex;
//         align-items: center;

//         .el-select__tags-text {
//             display: block;
//             font-size: 12px;
//             max-width: 80px;
//             white-space: nowrap;
//             overflow: hidden;
//             text-overflow: ellipsis;
//         }
//     }
// }
</style>
